<template>
  <div class="wrapper-first">
    <div class="logo">
    <div class="logo-box">
      <div class="logo-img">
        <img src="src/assets/img/logo.png">
      </div>
      <ul>
        <li class="logo-box-li" v-for="(item, index) in logoItems" :key="index">
          <a @mouseover="showGoods(index)" @mouseout="hideGoods(index)">{{ item.name }}</a>
          <!-- 隐藏层 -->
          <div class="goods" :style="{ display: item.showGoods ? 'block' : 'none' }">
            <ul>
              <li v-for="(product, productIndex) in item.products" :key="productIndex" @click="goToGoodsPage(product)">
                <img :src="product.src">
                <h3>{{ product.name }}</h3>
                <p>{{ product.price }}</p>
              </li>
            </ul>
          </div>
        </li>
      </ul>
      <div class="search">
        <input type="text" placeholder="小米10">
        <div class="search-icon-box">
          <i class="fa fa-search"></i>
        </div>
      </div>
    </div>
  </div>
  </div>
</template>
<script>
export default {
  data() {
    return{
      logoItems: [
  {
    name: "小米手机",
    showGoods: false,
    products: [
      { src: "src/assets/img/xiaomi01.jpg", name: "小米10 青春版 5G", price: "2099元起" },
      { src: "src/assets/img/xiaomi02.jpg", name: "小米10 Pro", price: "4999元起" },
      { src: "src/assets/img/xiaomi03.jpg", name: "小米10", price: "3799元起" },
      { src: "src/assets/img/xiaomi04.jpg", name: "小米CC9", price: "1499元起" },
      { src: "src/assets/img/xiaomi05.jpg", name: "小米CC9e", price: "1099元起" },
      { src: "src/assets/img/xiaomi06.jpg", name: "小米CC9 美图定制版", price: "1999元起" },
    ]
  },
  {
    name: "Redmi 红米",
    showGoods: false,
    products: [
      { src: "src/assets/img/redmi01.jpg", name: "Redmi 9", price: "799元起" },
      { src: "src/assets/img/redmi02.jpg", name: "Redmi 10X 4G", price: "999元起" },
      { src: "src/assets/img/redmi03.jpg", name: "Redmi 10X 5G 系列", price: "1599元起" },
      { src: "src/assets/img/redmi04.jpg", name: "Redmi K30 Pro", price: "2699元起" },
      { src: "src/assets/img/redmi05.jpg", name: "Redmi K30 Pro 变焦版", price: "3799元起" },
      { src: "src/assets/img/redmi06.jpg", name: "Redmi K30", price: "1399元起" },
    ]
  },
  {
    name: "电视",
    showGoods: false,
    products: [
      // 电视产品数据，你可以添加
    ]
  },
  {
    name: "笔记本",
    showGoods: false,
    products: [
      // 笔记本产品数据，你可以添加
    ]
  },
  {
    name: "家电",
    showGoods: false,
    products: [
      // 家电产品数据，你可以添加
    ]
  },
  {
    name: "路由器",
    showGoods: false,
    products: [
      // 路由器产品数据，你可以添加
    ]
  },
  {
    name: "智能硬件",
    showGoods: false,
    products: [
      // 智能硬件产品数据，你可以添加
    ]
  },
]
    }
    
  },
  methods: {
    showGoods(index) {
      this.logoItems[index].showGoods = true;
    },
    hideGoods(index) {
      this.logoItems[index].showGoods = false;
    },
    goToGoodsPage(product) {
      location.href = 'goods.html'; // 这里可以根据产品跳转逻辑进行修改
    }
  },
};
</script>
<style>
@import url('../assets/css/base.css');
</style>